| ![]() |
While most WebDAV client upload files using PUT verb, AJAX/HTML applications are unable to submit a file using PUT. The IT Hit WebDAV Server Engine can process files submitted with POST multipart request. The following example uploads a file to /mydocs folder:
<html>
<head><title>POST
Upload to WebDAV Server</title></head>
<body>
<form action="/mydocs/" method="post" enctype="multipart/form-data">
<input type="file" name="dummyname" /><br />
<input type="submit" />
</form>
</body>
</html>
When creating a multipart POST form make sure you follow this rules:
Always submit only one file per form. The server will be unable to calculate file size correctly if any extra input/select/textarea values submitted due to POST request standard limitations.
Action attribute can specify a folder or a file url. If the file with such name does not exist it will be created. If the file already exists it will be overwritten.
Note that maximum file upload size in most browsers is 2Gb.
The example below demonstrates creation of AJAX upload progress bar. It submits upload-progress REPORT request each second using XMLHttpRequest and parses the response extracting total file size and amount of bytes uploaded to server. The example runs in Internet Explorer, Firefox and Safari. See IUploadProgress interface for upload-progress REPORT description.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>AJAX
Upload Progress & Cancel Upload</title>
<script type="text/javascript">
var
file;
function
prepareUpload()
{
document.getElementById("fileSize").innerHTML = "";
document.getElementById("bytesUploaded").innerHTML = "";
document.getElementById("percentUploaded").innerHTML = "";
document.getElementById("uploadProgressBar").style.width = "0%";
// get
file name
file = document.getElementById("file").value;
if(file.lastIndexOf("\\")>=0)
file =
file.substr(file.lastIndexOf("\\")+1);
document.getElementById("fileName").innerHTML = file;
// get folder path
var
curFolder = window.location.href;
if(curFolder[curFolder.length-1]!="/")
curFolder =
curFolder.substring(0, curFolder.lastIndexOf("/")+1);
document.getElementById("target").innerHTML = curFolder;
document.getElementById("frm").action = curFolder;
}
var
timerId;
function
formSubmit()
{
timerId = setInterval("updateProgress()", 1000);
document.getElementById("cancelUploadBtn").disabled = false;
}
function
updateProgress()
{
var
request = window.ActiveXObject ? new
ActiveXObject("Microsoft.XMLHTTP")
: new XMLHttpRequest();
var
uploadTarget = document.getElementById("frm").action
+ file;
request.open("REPORT", uploadTarget, false);
request.send("<upload-progress xmlns='ithit'/>");
var
resp = request.responseText;
// Extract
number of bytes uploaded and total content length of the file.
//
Usually you will use XML DOM or regular expressions for this purposes
// but
here for the sake of simplicity we will just extract using string methods.
var
size;
var
sizeIndex = resp.indexOf("total-content-length");
if(sizeIndex
!= -1)
{
size =
resp.substring(resp.indexOf(">",
sizeIndex)+1, resp.indexOf("</",
sizeIndex));
document.getElementById("fileSize").innerHTML = size;
}
var
bytes = "Finished";
var
percent = 100;
var
bytesIndex = resp.indexOf("bytes-uploaded");
if(bytesIndex
!= -1)
{
bytes =
resp.substring(resp.indexOf(">",
bytesIndex)+1, resp.indexOf("</",
bytesIndex));
if(parseInt(size)!=0)
percent =
100*parseInt(bytes)/parseInt(size);
}
document.getElementById("bytesUploaded").innerHTML = bytes;
document.getElementById("percentUploaded").innerHTML =
percent.toString().substr(0, 4) + " %";
document.getElementById("uploadProgressBar").style.width =
percent.toString() + "%";
if(percent==100)
{
clearInterval(timerId);
document.getElementById("cancelUploadBtn").disabled = true;
}
}
function
cancelUpload()
{
// recreate
iframe to cancel upload
document.getElementById("uploadFrameHolder").innerHTML = "<iframe name='uploadFrame'
></iframe>";
clearInterval(timerId);
document.getElementById("cancelUploadBtn").disabled = true;
}
</script>
</head>
<body>
<span id="uploadFrameHolder" style="display:none"><iframe name="uploadFrame" ></iframe></span>
<form id="frm" method="post" enctype="multipart/form-data" target="uploadFrame"
onsubmit="formSubmit()">
<input type="file" id="file" name="dummyname" onchange="prepareUpload()" /><br />
<input type="submit" value="Upload" />
</form>
<table>
<tr><td>File Name: </td><td id="fileName"></td></tr>
<tr><td>Upload
Target: </td><td id="target"></td></tr>
<tr><td>File Size: </td><td id="fileSize"></td></tr>
<tr><td>Bytes
Uploaded: </td><td id="bytesUploaded"></td></tr>
<tr>
<td>Upload
Progress: </td>
<td>
<table>
<tr>
<td>
<div style="width:200px; height:10px; border: solid 1px black; font-size:0px">
<div id="uploadProgressBar"
style=" background-color: gray;
height:100%; width:0%"></div>
</div>
</td>
<td id="percentUploaded"></td>
</tr>
</table>
</td>
</tr>
</table>
<input id="cancelUploadBtn" disabled="true" type="button" value="Cancel" onclick="cancelUpload()" />
</body>
</html>